<template>
    <div class="guidePage">
        <div class="flex guidePage-title-box">
            <div class="mt-10 flex align-items backgroundBlackOp1 guidePage-title-box1">
                <img src="../images/guidePageImg/logo.png" alt="" class="guideImage">
                <p class="guideTitel">设置基本信息</p>
            </div>
        </div>
        <!-- 中间 -->
        <div class="steps mt-10 ">
            <Row class="backgroundBlackOp1">
                <Col span="12" offset="8">
                    <Steps :current="addCurrent" class="steps-box">
                        <Step title="1.设置企业信息" icon="ios-person"></Step>
                        <Step title="2.设置组织架构" icon="ios-camera"></Step>
                        <Step title="3.完成" icon="ios-mail"></Step>
                 </Steps>
                </Col>
            </Row>
            <Spin size="large" fix v-show="showSpin">
                    产品信息提交中......
            </Spin>
            <Form ref="basicForm" :model="topData" :rules="basicFormRules" class="steps-form">
                <!-- 第一步 start-->
                <div v-show="addCurrent == 0"  class="steps-one">
                    <Row>
                        <Col span="24">
                                <FormItem label="企业logo" prop="logo">
                                <div class="flex align-items">
                                    <Upload action="" :before-upload="beforeUploadImg" accept=".jpg,.png,.jpeg" >
                                        <img :src="topData.logo" alt="" v-if="topData.logo"
                                             style="width: 150px;height: 150px;">
                                        <img src="../images/guidePageImg/addLog.png" alt="" v-else
                                             style="width: 150px;height: 150px;">
                                    </Upload>
                                    <!-- <Button type="primary" @click="chooseImg">更换</Button> -->
                                </div>
                                </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="企业名称" prop="companyName">
                                <span>{{topData.companyName}}</span>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="统一社会信用代码" prop="creditCode">
                                <span>{{topData.creditCode}}</span>
                            </FormItem>

                        </Col>
                        <Col span="12">
                            <FormItem label="办公地址" prop="dress">
                                <Cascader :data="areaList" v-model="topData.area" @on-change="changeArea"  style="display: inline-block;" class='guideInput'></Cascader>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="详细地址" prop="workDetailAddress">
                                <Input v-model="topData.workDetailAddress" placeholder="请输入详细地址" clearable
                                       class='guideInput'/>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="公司规模" prop="scale">
                                <Select v-model="topData.scaleCode"  placeholder="请选择公司规模"  class='guideInput'>
                                    <Option v-for="(item, index) in scaleList" :value="item.code" :key="index">{{ item.description }}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="所属行业" prop="industry">
                                <Input v-model="topData.industryInvolvedName" @on-focus="checkIndustryInvolvedInput" placeholder="请选择所属行业"  class='guideInput'></Input>
                            </FormItem>
                        </Col>
                        <Col span="24">
                            <FormItem label="公司简介" prop="briefIntroduction">
                                <Input v-model="topData.briefIntroduction" type="textarea" :rows="4" placeholder="请输入公司简介" />
                            </FormItem>
                        </Col>
                    </Row>
                </div>
                <!-- 第一步 end-->
                <!-- 第二步 start-->
                <div class="steps-two" v-show="addCurrent == 1">
                    <div slot="footer" class="footer">
                        <Button @click="createRootNode">创建一级部门</Button>
                        <Button @click="save">保存草稿</Button>
                    </div>
                    <!-- 组织架构图 -->
                    <div style="display: flex; justify-content: space-between;flex: 1;">
                        <div ref="diagram" style="flex-grow: 2; width: 100%; height: 500px;"></div>
                        <div>
                            <div>
                                <Form ref="orgForm" v-show="orgEditorShow" :model="selectedOrg" :rules="orgValidateRule"
                                      :label-width="80">
                                    <FormItem label="部门" prop="organization">
                                        <Input placeholder="请输入部门名称" ref="orgName" v-model="selectedOrg.organization"
                                               @on-blur="validateSelectedNode" :disabled="!isEdit"></Input>
                                    </FormItem>
                                    <FormItem label="职位" prop="position">
                                        <AutoComplete
                                                ref="userPosition"
                                                v-model="selectedOrg.position"
                                                @on-change="changePosition"
                                                placeholder="请输入职位"
                                                style="width:200px" :disabled="!isEdit">
                                            <Option v-for="item in positionList" :value="item.name" :key="item.id">{{ item.name }}
                                            </Option>
                                        </AutoComplete>
                                    </FormItem>
                                    <FormItem label="姓名" prop="name">
                                        <AutoComplete ref="userName"
                                                      v-model="selectedOrg.name"
                                                      @on-change="changeUser"
                                                      placeholder="请输入姓名"
                                                      style="width:200px" :disabled="!isEdit">
                                            <Option v-for="item in userList" :value="item.name" :key="item.id">{{ item.name }}
                                            </Option>
                                        </AutoComplete>
                                    </FormItem>
                                    <FormItem label="手机号" prop="mobile">
                                        <Input ref="userMobile" placeholder="请输入手机号" v-model="selectedOrg.mobile"
                                               @on-blur="validateSelectedNode"
                                               :disabled="mobileDisable || !isEdit"></Input>
                                    </FormItem>
                                </Form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 第二步 end-->
                <!-- 第三步 start-->
                <div class="steps-three" v-show="addCurrent == 2">
                    <div class="steps-three-img">
                        <img src="../images/guidePageImg/wancheng.png"  alt="">
                    </div>
                    <p class="steps-three-contant">
                        基础信息已经完成，您可以选择进入系统设置设置更多信息
                    </p>
                    <div slot="footer" class="footer">
                        <Button @click="goToSystemSetting">进入更多设置</Button>
                        <Button @click="goToHome">进入工作台</Button>
                    </div>
                </div>
                <!-- 第三步 end-->
                <div  v-show="addCurrent == 0 || addCurrent == 1" >
                    <Button @click="closeAdd">跳过</Button>
                    <Button type="primary" @click="next" class="saveBtn">保存  进入下一步</Button>
                    <p class="savePrompt">
                        <img src="../images/guidePageImg/icon13.png" alt="">
                        <span>为了有更好的使用功能，请您完善信息</span>
                    </p>
                </div>
            </Form>
        </div>
        <Modal
                ok-text="确定"
                cancel-text="取消"
                :mask-closable="false"
                :draggable="true"
                :loading="INDModLoading"
                v-model="INDMod"
                @on-ok="INDModOK"
                @on-cancel="INDModCancel"
                title="选择所属行业">
            <div class="d-f ai-c jc-sb">
                <Input v-model="INDModsearchValue" search :enter-button="true" @on-search="searchIndustryList" placeholder="模糊查询行业信息" />
                <Button type="error" @click="clearINDModsearchValue" class="ml-10">清空搜索</Button>
            </div>

            <Tree :data="industryList" show-checkbox @on-check-change="checkOver"  class="mt-20"></Tree>
        </Modal>
    </div>
</template>
<script>
import go from 'gojs';

var $ = go.GraphObject.make;
var nodeIdCounter = -1; // use a sequence to guarantee key uniqueness as we add/remove/modify nodes

export default {
    name: 'guidePage',
    props: ['modelData'],  // accept model data as a parameter
    data(){
        return{
            addCurrent: 0, // 默认显示第1条
            showSpin: false, // 提交时候显示的样式 默认不显示
            loadingStatus: false,
            //第一步参数
            topData:{},
            industryList:[],
            areaList:[],
            scaleList:[],
            basicFormRules: {
                workDetailAddress: [
                    // {required: true, message: '请填写必填项', trigger: 'blur'},
                    {type: 'string', max: 200, message: '办公详细地址不能超过200个字', trigger: 'blur'},
                    {
                        type: 'string',
                        pattern: /^[\u4e00-\u9fa5:',!();\-\-，。；：=+*&^%$#~‘’（）@！？<>《》a-zA-Z0-9_{}]*$/,
                        message: '办公详细地址只能输入汉字数字英文',
                        trigger: 'blur'
                    }
                ],
                briefIntroduction: [
                    // {required: true, message: '请填写必填项', trigger: 'blur'},
                    {type: 'string', max: 500, message: '公司简介不能超过500个字', trigger: 'blur'},
                    {
                        type: 'string',
                        pattern: /^[\u4e00-\u9fa5:',!();\-\-，。；：=+*&^%$#~‘’（）@！？<>《》a-zA-Z0-9_{}]*$/,
                        message: '公司简介格式不正确',
                        trigger: 'blur'
                    }
                ]
            },
            INDModLoading: false,
            INDMod: false,
            INDModsearchValue: '',
            INDModsearchData: {
                code: '',
                description: ''
            },
            INDSearchWaitData: [],
            //  图片上传 end

            //第二步参数
            diagram: null,
            userEditorVisible: false,
            inspectedObject: null,
            blankOrg:
                {
                    organization: '',
                    position: '',
                    name: '',
                    mobile: '',
                    headPicUrl: 'http://truewin.oss-cn-shanghai.aliyuncs.com/1543977187297_wJ4o6QDcGCCRzUj0je.png'
                },
            selectedOrg:
                {
                    organization: '',
                    position: '',
                    name: '',
                    mobile: '',
                    headPicUrl: 'http://truewin.oss-cn-shanghai.aliyuncs.com/1543977187297_wJ4o6QDcGCCRzUj0je.png'
                },
            orgValidateRule: {
                organization: {validator: this.validateOrganizationInForm, trigger: 'blur'},
                position: {validator: this.validatePositionInForm, trigger: 'blur'},
                name: {validator: this.validateNameInForm, trigger: 'blur'},
                mobile: {validator: this.validateMobileInForm, trigger: 'blur'}
            },
            orgEditorShow: false,
            positionList: [],
            positionDbList: [],
            userList: [],
            userDbList: [],
            diagramData: {
                'class': 'go.TreeModel',
                'nodeDataArray': []
            },
            mobileDisable: false,
            isEdit: true,
            errorMsg: null,
            focusField: null,
            mobileReg: /^[1][0-9]{10}$/,
            orgReg: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
            positionReg: /^[a-zA-Z0-9_&\u4e00-\u9fa5]+$/,
            nameReg: /^[a-zA-Z0-9_&\u4e00-\u9fa5]+$/,
            version: 0
        }
    },
    mounted(){
        var companyInfo = localStorage.getItem("company");
        if(!companyInfo){
            this.$Message.error('获取公司信息失败');
            return;
        }
        this.findCompanyInfo();
        this.loadAreaData();
        // 所属行业
        var industryList = JSON.parse(localStorage.getItem('dictionary')).CUSTOMER_INDUSTRY_INVOLVED;
        if (!industryList || industryList.length === 0) {
            this.$Message.error('获取所属行业列表失败');
        }
        this.industryList = this.industryList.concat(industryList);
        this.industryList.forEach((item, index) => {
            item.children = [];
            item.disableCheckbox = true;
            Object.keys(item.subData).forEach(function (key) {
                if (item.id === key) {
                    item.children = JSON.parse(JSON.stringify(item.subData[key]));
                }
            });
        });
        // 人员规模
        var scaleList = JSON.parse(localStorage.getItem('dictionary')).COMPANY_SCALE_CODE;
        if (!scaleList || scaleList.length === 0) {
            this.$Message.error('获取公司人员规模列表失败');
        }
        this.scaleList = this.scaleList.concat(scaleList);


        var self = this;
        // this.initData();
        var myDiagram =
            $(go.Diagram, this.$refs.diagram,
                {
                    initialContentAlignment: go.Spot.Center,
                    maxSelectionCount: 1, // users can select only one part at a time,
                    validCycle: go.Diagram.CycleDestinationTree, // make sure users can only create trees
                    'clickCreatingTool.archetypeNodeData': {}, // allow double-click in background to create a new node
                    'clickCreatingTool.insertPart': function (loc) { // customize the data for the new node
                        this.archetypeNodeData = {
                            key: this.getNextKey(), // assign the key based on the number of nodes
                            position: '职位',
                            title: ''
                        };
                        return go.ClickCreatingTool.prototype.insertPart.call(this, loc);
                    },
                    layout:
                        $(go.TreeLayout,
                            {
                                treeStyle: go.TreeLayout.StyleLastParents,
                                arrangement: go.TreeLayout.ArrangementHorizontal,
                                // properties for most of the tree:
                                angle: 90,
                                layerSpacing: 35,
                                // properties for the "last parents":
                                alternateAngle: 90,
                                alternateLayerSpacing: 35,
                                alternateAlignment: go.TreeLayout.AlignmentBus,
                                alternateNodeSpacing: 20
                            }),
                    'contextMenuTool.isEnabled': true,
                    'undoManager.isEnabled': true // enable undo & redo
                });

        myDiagram.addDiagramListener('ChangedSelection', function (e) {
            self.inspectObject();
        });
        // var levelColors = ["#AC193D/#BF1E4B", "#2672EC/#2E8DEF", "#8C0095/#A700AE", "#5133AB/#643EBF",
        //     "#008299/#00A0B1", "#D24726/#DC572E", "#008A00/#00A600", "#094AB2/#0A5BC4"];
        var levelColors = ['#fff/#fff', '#fff/#fff', '#fff/#fff',
            '#fff/#fff', '#fff/#fff', '#fff/#fff', '#fff/#fff'];
        // override TreeLayout.commitNodes to also modify the background brush based on the tree depth level
        myDiagram.layout.commitNodes = function () {
            go.TreeLayout.prototype.commitNodes.call(myDiagram.layout); // do the standard behavior
            // then go through all of the vertexes and set their corresponding node's Shape.fill
            // to a brush dependent on the TreeVertex.level value
            myDiagram.layout.network.vertexes.each(function (v) {
                if (v.node) {
                    var level = v.level % (levelColors.length);
                    var colors = levelColors[level].split('/');
                    v.node.colors = colors;
                    // if (v.node && v.node.data && v.node.hasError) {
                    //     colors = ["#AC193D", "#BF1E4B"];
                    // }
                    var shape = v.node.findObject('SHAPE');
                    if (shape) {
                        shape.fill = $(go.Brush, 'Linear', {
                            0: colors[0],
                            1: colors[1],
                            start: go.Spot.Left,
                            end: go.Spot.Right
                        });
                    }
                }
            });
        };

        // define the Node template
        myDiagram.nodeTemplate =
            $(go.Node, 'Auto',
                { // handle dragging a Node onto a Node to (maybe) change the reporting relationship
                    mouseDragEnter: function (e, node, prev) {
                        var diagram = node.diagram;
                        var selnode = diagram.selection.first();
                        if (!mayWorkFor(selnode, node)) return;
                        var shape = node.findObject('SHAPE');
                        if (shape) {
                            shape._prevFill = shape.fill; // remember the original brush
                            shape.fill = 'darkred';
                        }
                    },
                    mouseDragLeave: function (e, node, next) {
                        var shape = node.findObject('SHAPE');
                        if (shape && shape._prevFill) {
                            shape.fill = shape._prevFill; // restore the original brush
                        }
                    },
                    mouseDrop: function (e, node) {
                        var diagram = node.diagram;
                        var selnode = diagram.selection.first(); // assume just one Node in selection
                        if (mayWorkFor(selnode, node)) {
                            // find any existing link into the selected node
                            var link = selnode.findTreeParentLink();
                            if (link !== null) { // reconnect any existing link
                                link.fromNode = node;
                            } else { // else create a new link
                                diagram.toolManager.linkingTool.insertLink(node, node.port, selnode, selnode.port);
                            }
                        }
                    }
                },
                // for sorting, have the Node.text be the data.name
                new go.Binding('text', 'position'),
                // bind the Part.layerName to control the Node's layer depending on whether it isSelected
                new go.Binding('layerName', 'isSelected', function (sel) {
                    return sel ? 'Foreground' : '';
                }).ofObject(),
                // define the node's outer shape
                $(go.Shape, 'RoundedRectangle',
                    {
                        name: 'SHAPE',
                        fill: 'white',
                        // stroke: borderColor,
                        // set the port properties:
                        stroke: '#9aceef',
                        portId: '',
                        fromLinkable: true,
                        toLinkable: true,
                        cursor: 'pointer'
                    }
                ),
                $(go.Panel, 'Horizontal',
                    $(go.Picture,
                        {
                            name: 'Picture',
                            desiredSize: new go.Size(75, 107),
                            margin: new go.Margin(6, 8, 6, 10)
                        },
                        new go.Binding('source', 'headPicUrl').makeTwoWay()
                        // new go.Binding("source", "key", findHeadShot)
                    ),
                    // define the panel where the text will appear
                    $(go.Panel, 'Table',
                        {
                            maxSize: new go.Size(230, 999),
                            margin: new go.Margin(6, 8, 6, 10),
                            defaultAlignment: go.Spot.Left
                        },
                        $(go.RowColumnDefinition, {column: 2, width: 1}),
                        $(go.TextBlock, this.textStyle(), // the name
                            {
                                row: 0,
                                column: 0,
                                columnSpan: 2,
                                stroke: '#4c4c4c',
                                font: '16pt Segoe UI,sans-serif',
                                editable: false,
                                isMultiline: false,
                                minSize: new go.Size(10, 16),
                                margin: new go.Margin(15, 0, 0, 20)
                            },
                            new go.Binding('text', 'organization').makeTwoWay()),
                        $(go.TextBlock, '职位: ', this.textStyle(),
                            {
                                row: 1,
                                column: 0,
                                stroke: '#4c4c4c',
                                minSize: new go.Size(10, 14),
                                margin: new go.Margin(7, 0, 0, 20)
                            }),
                        $(go.TextBlock, this.textStyle(),
                            {
                                row: 1,
                                column: 1,
                                editable: false,
                                isMultiline: false,
                                stroke: '#4c4c4c',
                                minSize: new go.Size(10, 14),
                                margin: new go.Margin(7, 0, 0, 5)
                            },
                            new go.Binding('text', 'position').makeTwoWay()),
                        $(go.TextBlock, '姓名: ', this.textStyle(),
                            {
                                row: 3,
                                column: 0,
                                stroke: '#4c4c4c',
                                minSize: new go.Size(10, 14),
                                margin: new go.Margin(7, 0, 0, 20)
                            }),
                        $(go.TextBlock, this.textStyle(),
                            {
                                row: 3,
                                column: 1,
                                editable: false,
                                isMultiline: false,
                                stroke: '#4c4c4c',
                                minSize: new go.Size(10, 14),
                                margin: new go.Margin(7, 0, 0, 5)
                            },
                            new go.Binding('text', 'name').makeTwoWay())
                    ) // end Table Panel
                ) // end Horizontal Panel
            ); // end Node

        // the context menu allows users to make a position vacant,
        // remove a role and reassign the subtree, or remove a organization
        myDiagram.nodeTemplate.contextMenu =
            $(go.Adornment, 'Vertical',
                $('ContextMenuButton',
                    $(go.TextBlock, '创建子部门'),
                    {
                        click: function (e, obj) {
                            var node = obj.part.adornedPart;
                            if (node !== null) {
                                var thisemp = node.data;
                                console.log(thisemp, 99898);
                                myDiagram.startTransaction('createDepartmentOrPosition');
                                var newemp = {
                                    key: self.getNextKey(),
                                    'organization': '',
                                    'position': '',
                                    'name': '',
                                    'mobile': '',
                                    'headPicUrl': 'http://truewin.oss-cn-shanghai.aliyuncs.com/1543977187297_wJ4o6QDcGCCRzUj0je.png',
                                    nodeType: 'department',
                                    parent: thisemp.key,
                                    isSelected: true
                                };
                                myDiagram.model.addNodeData(newemp);
                                myDiagram.select(myDiagram.findNodeForKey(newemp.key));
                                myDiagram.commitTransaction('createDepartmentOrPosition');
                            }
                        }
                    }
                ),
                $('ContextMenuButton',
                    $(go.TextBlock, '创建职位'),
                    {
                        click: function (e, obj) {
                            var node = obj.part.adornedPart;
                            if (node !== null) {
                                var thisemp = node.data;
                                myDiagram.startTransaction('createDepartmentOrPosition');
                                var newemp = {
                                    key: self.getNextKey(),
                                    'organization': thisemp.organization,
                                    'organizationId': thisemp.organizationId,
                                    'position': '',
                                    'name': '',
                                    'mobile': '',
                                    'headPicUrl': 'http://truewin.oss-cn-shanghai.aliyuncs.com/1543977187297_wJ4o6QDcGCCRzUj0je.png',
                                    nodeType: 'position',
                                    parent: thisemp.key,
                                    isSelected: true
                                };
                                myDiagram.model.addNodeData(newemp);
                                myDiagram.select(myDiagram.findNodeForKey(newemp.key));
                                myDiagram.commitTransaction('createDepartmentOrPosition');
                            }
                        }
                    }
                ),
                $('ContextMenuButton',
                    $(go.TextBlock, '复制'),
                    {
                        click: function (e, obj) {
                            var node = obj.part.adornedPart;
                            if (node !== null) {
                                var thisemp = node.data;
                                myDiagram.startTransaction('createDepartmentOrPosition');
                                var newemp = {
                                    key: self.getNextKey(),
                                    'organization': thisemp['organization'],
                                    'organizationId': thisemp['organizationId'],
                                    'position': thisemp['position'],
                                    'positionId': thisemp['positionId'],
                                    'name': thisemp['name'],
                                    'userId': thisemp['userId'],
                                    'mobile': thisemp['mobile'],
                                    'headPicUrl': thisemp['headPicUrl'],
                                    nodeType: thisemp['nodeType'],
                                    parent: thisemp.parent
                                };
                                myDiagram.model.addNodeData(newemp);
                                myDiagram.select(myDiagram.findNodeForKey(newemp.key));
                                myDiagram.commitTransaction('createDepartmentOrPosition');
                            }
                        }
                    }
                ),
                $('ContextMenuButton',
                    $(go.TextBlock, '清空'),
                    {
                        click: function (e, obj) {
                            // remove the whole subtree, including the node itself
                            var node = obj.part.adornedPart;
                            if (node !== null) {
                                myDiagram.startTransaction('reset dept');
                                var thisemp = node.data;
                                self.selectedOrg = {
                                    key: thisemp.key,
                                    'organization': '',
                                    'organizationId': thisemp.organizationId,
                                    'position': '',
                                    'name': '',
                                    'mobile': '',
                                    'headPicUrl': 'http://truewin.oss-cn-shanghai.aliyuncs.com/1543977187297_wJ4o6QDcGCCRzUj0je.png',
                                    nodeType: thisemp.position,
                                    parent: thisemp.parent,
                                    isSelected: true
                                };
                                myDiagram.commitTransaction('reset dept');
                            }
                            // 自动保存
                            localStorage.setItem('diagramData', myDiagram.model.toJson());
                        }
                    }
                ),
                $('ContextMenuButton',
                    $(go.TextBlock, '删除'),
                    {
                        click: function (e, obj) {
                            // remove the whole subtree, including the node itself
                            var node = obj.part.adornedPart;
                            if (node !== null) {
                                if (!node.isTreeLeaf) {
                                    self.$Modal.confirm({
                                        title: '确认',
                                        content: '将删除' + node.data.organization + '和其下所有部门和职位，是否确认删除？',
                                        onOk: () => {
                                            myDiagram.startTransaction('remove dept');
                                            myDiagram.removeParts(node.findTreeParts());
                                            self.selectedOrg = self.blankOrg;
                                            myDiagram.commitTransaction('remove dept');
                                        },
                                        onCancel: () => {

                                        }
                                    });
                                } else {
                                    myDiagram.startTransaction('remove dept');
                                    myDiagram.removeParts(node.findTreeParts());
                                    self.selectedOrg = self.blankOrg;
                                    myDiagram.commitTransaction('remove dept');
                                }
                            }
                            // 自动保存
                            localStorage.setItem('diagramData', myDiagram.model.toJson());
                        }
                    }
                )
            );
        // define the Link template
        myDiagram.linkTemplate =
            $(go.Link, go.Link.Orthogonal,
                {corner: 5, relinkableFrom: true, relinkableTo: true},
                $(go.Shape, {strokeWidth: 1, stroke: '#9aceef'})); // the link shape
        myDiagram.linkTemplate.contextMenu =
            $(go.Adornment, 'Vertical',
                $('ContextMenuButton',
                    $(go.TextBlock, '删除关联'),
                    {
                        click: function (e, obj) {
                            var link = obj.part.adornedPart;
                            // console.log(link)
                            // myDiagram.startTransaction("remove link");
                            myDiagram.remove(link);
                            // myDiagram.commitTransaction("remove link");
                            // myDiagram.commandHandler.deleteSelection();
                            // e.diagram.commandHandler.deleteSelection();
                        }
                    },
                    {}
                )
            );

        this.diagram = myDiagram;

        this.diagram.model = go.Model.fromJson(this.diagramData);
    },
    methods: {
        //进入系统设置页面
        goToSystemSetting(){
            window.open('/settings', '_blank');
        },
        //进入首页
        goToHome(){
            this.$router.push({
                path: '/home'
            });
        },
        // 填写下一步
         next () {
                 if(this.addCurrent == 0){
                     // this.diagram.model = go.Model.fromJson(this.diagramData);
                     this.saveCompanyInfo();
                     this.initData();
                 }
                 if(this.addCurrent == 1){
                     this.submit();
                 }
                if (this.addCurrent == 3) {
                    // this.addCurrent = 0;
                } else {
                    this.addCurrent += 1;
                    console.log(this.topData, '提交的数据')
                }

            },
        // 跳过 当前参数为空直接进入下一步
        closeAdd () {
            if (this.addCurrent == 1) {
                this.topData.isGuide = true;
                this.saveCompanyInfo();
            }
            this.addCurrent += 1;
        },
        findCompanyInfo(){
            this.showSpin = true;
            depot.get({
                url: this.URL.USER.FIND_CURRENT_COMPANY,
                cb: (data) => {
                    this.showSpin = false;
                    if (data.code === 0) {
                        this.topData = data.data;
                        this.topData.area = [];
                        this.topData.area.push(data.data.workProvinceCode);
                        this.topData.area.push(data.data.workCityCode);
                        this.topData.area.push(data.data.workDistrictCode);
                        console.log(data.data.isGuide,'data.datadata.data');
                        localStorage.setItem('company', JSON.stringify(data.data));
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                    }
                },
                ce: (error) => {
                    this.showSpin = false;
                }
            });
        },
        // 上传文件之前的方法
        beforeUploadImg (file) {
            let _this = this;
            _this.showSpin = true;
            _this.loadingStatus = true;
            if (file) {
                let reader = new FileReader();
                reader.onloadend = function () {
                    /* this从vue实例变为reader */
                    let submitData = new FormData();
                    submitData.append('file', file);
                    depot.post({
                        url: _this.URL.DOCUMENT.UPLOAD_DOCUMENT,
                        data: submitData,
                        cb: (data) => {
                            _this.showSpin = false;
                            _this.loadingStatus = false;
                            if (data.code === 0) {
                                if(data.data.accessUrl){
                                    _this.topData.logo = data.data.accessUrl;
                                }
                            } else {
                                _this.$Message.error(data.message);
                            }
                        },
                        ce: (error) => {
                            _this.showSpin = false;
                        }
                    });
                };
                if (file) {
                    reader.readAsDataURL(file);
                }
            }
            return false;
        },
        // 查询所有省市区
        loadAreaData () {
            var areaList = this.$store.state.home.areaList;
            if (areaList && areaList.length > 0) {
                this.areaList = areaList;
                return;
            }
            this.showSpin = true;
            depot.get({
                url: this.URL.DATA.FIND_ALL_BY_PARENT_ID,
                config: {
                    params: {
                        parentId: 1
                    }
                },
                cb: (data) => {
                    this.showSpin = false;
                    if (data.code === 0) {
                        this.areaList = data.data;
                        this.$store.commit('setAreaList', data.data);
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                    }
                },
                ce: (error) => {
                    this.showSpin = false;
                }
            });
        },
        // 改变省市区级联选择
        changeArea (value, selectedData) {
            if (selectedData.length === 0) {
                this.topData.workProvinceCode = '';
                this.topData.workProvinceName = '';
                this.topData.workCityCode = '';
                this.topData.workCityName = '';
                this.topData.workDistrictCode = '';
                this.topData.workDistrictName = '';
            } else {
                this.topData.workProvinceCode = selectedData[0].code;
                this.topData.workProvinceName = selectedData[0].name;
                this.topData.workCityCode = selectedData[1].code;
                this.topData.workCityName = selectedData[1].name;
                this.topData.workDistrictCode = selectedData[2].code;
                this.topData.workDistrictName = selectedData[2].name;
            }
        },
        saveCompanyInfo(){
            let vue = this;
            this.$refs['basicForm'].validate((valid) => {
                if (valid) {
                    this.showSpin = true;
                    // 类型名称
                    vue.scaleList.forEach((item) => {
                        if (item.code === vue.topData.scaleCode) {
                            vue.topData.scaleName = item.description;
                        }
                    });
                    depot.post({
                        url: vue.URL.USER.UPDATE_COMPANY,
                        data: vue.topData,
                        cb: (data) => {
                            this.showSpin = false;
                            if (data.code === 0) {
                                this.findCompanyInfo();
                            } else {
                                vue.$Message.error(data.message);
                            }
                        },
                        ce: (error) => {
                            this.showSpin = false;
                        }
                    });
                } else {
                    vue.$Message.error('您输入的信息有误，请检查');
                }
            });
        },
        // 点击所属行业input标签触发弹框
        checkIndustryInvolvedInput () {
            this.INDMod = true;
            if (this.topData.industryInvolvedName) {
                this.industryList.forEach((item, index) => {
                    item.children.forEach((item2, index2) => {
                        if (this.topData.industryInvolvedName === item2.description) {
                            item2.checked = true;
                            this.INDModsearchData.code = item2.code;
                            this.INDModsearchData.description = item2.description;
                        }
                    });
                });
                this.industryList = JSON.parse(JSON.stringify(this.industryList));
            }
        },
        // 所属行业弹框确定按钮
        INDModOK () {
            this.topData.industryInvolvedCode = this.INDModsearchData.code;
            this.topData.industryInvolvedName = this.INDModsearchData.description;
            this.INDMod = false;
        },
        // 所属行业弹框取消按钮
        INDModCancel () {
            this.INDMod = false;
            this.clearINDModsearchValue();
        },
        mergeTreeData (menuList) {
            if (menuList && menuList.length > 0) {
                menuList.forEach((menu) => {
                    if (menu) {
                        menu.title = menu.description;
                        this.mergeTreeData(menu.children);
                    }
                });
            }
        },
        // 点击复选框时触发
        checkOver (val) {
            let arr = [];
            let INDATA = [];
            if (val.length > 1) {
                let str = '';
                let str2 = '';
                INDATA = JSON.parse(JSON.stringify(this.industryList));
                val.forEach((item3, index3) => {
                    let flag = false;
                    INDATA.forEach((item, index) => {
                        if (item.code === item3.code) {
                            flag = true;
                            item.checked = false;
                        }
                    });
                    if (!flag) {
                        arr.push(item3);
                    }
                });
                INDATA.forEach((item, index) => {
                    item.children.forEach((item2, index2) => {
                        if(arr.length === 1){
                            str = arr[0].code;
                            str2 = arr[0].description;
                        }
                        if (arr.length > 1 && this.INDModsearchData.code === item2.code) {
                            item2.checked = false;
                            arr.forEach((item3, index3) => {
                                if (item2.code !== item3.code) {
                                    console.log(item3.code, 333);
                                    str = item3.code;
                                    str2 = item3.description;
                                }
                            });
                        }
                    });
                });
                this.industryList = JSON.parse(JSON.stringify(INDATA));
                this.INDModsearchData.code = str;
                this.INDModsearchData.description = str2;
            }

            if (val.length === 1) {
                this.INDModsearchData = {};
                arr = JSON.parse(JSON.stringify(val));
                this.INDModsearchData.code = arr[0].code;
                this.INDModsearchData.description = arr[0].description;
            }
            if (val.length === 0) {
                this.INDModsearchData = {};
                this.industryList.forEach((item, index) => {
                    item.checked = false;
                    item.children.forEach((item2, index2) => {
                        item2.checked = false;
                    });
                });
                this.industryList = JSON.parse(JSON.stringify(this.industryList));
            }
        },
        // 点击搜索触发
        searchIndustryList (val) {
            if (!val) {
                if (this.INDSearchWaitData.length > 0) {
                    this.industryList = JSON.parse(JSON.stringify(this.INDSearchWaitData));
                }
            } else {
                this.showSpin = true;
                this.INDSearchWaitData = JSON.parse(JSON.stringify(this.industryList));
                let queryParams = {};
                queryParams.description = val;
                depot.get({
                    url: this.URL.DATA.FIND_CUSTOMER_INDUSTRY_INVOLVED_BY_DESCRIPTION,
                    config: {
                        params: queryParams
                    },
                    cb: (data) => {
                        this.showSpin = false;
                        if (data.code === 0) {
                            this.industryList = JSON.parse(JSON.stringify(data.data));
                            this.industryList.forEach((item1) => {
                                item1.disableCheckbox = true;
                            });
                        } else if (data.code === 999) {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                        this.showSpin = false;
                    }
                });
            }
        },
        // 清空搜索
        clearINDModsearchValue () {
            if (this.INDSearchWaitData.length > 0) {
                this.INDModsearchValue = '';
                this.industryList = JSON.parse(JSON.stringify(this.INDSearchWaitData));
            }
        },
        initData () {
            // 获取组织图
            var diagramDataCache = localStorage.getItem('diagramData');
            if (diagramDataCache) {
                this.$Modal.confirm({
                    title: '确认',
                    content: '您上次编辑的内容尚未提交，是否继续编辑？',
                    okText: '继续编辑',
                    cancelText: '放弃草稿',
                    onOk: () => {
                        this.diagramData = JSON.parse(diagramDataCache);
                        this.diagram.model = go.Model.fromJson(this.diagramData);
                        console.log(this.diagram.model, ' this.diagram.mode22222');
                    },
                    onCancel: () => {
                        this.loadGraphicData();
                    }
                });
            } else {
                this.loadGraphicData();
            }
            // 获取职位信息
            depot.get({
                url: this.URL.USER.FIND_POSITION_LIST,
                cb: (data) => {
                    if (data.code === 0) {
                        this.positionDbList = data.data;
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                    }
                }
            });

            // 获取员工信息
            depot.get({
                url: this.URL.USER.FIND_USER_LIST,
                cb: (data) => {
                    if (data.code === 0) {
                        this.userDbList = data.data;
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                    }
                }
            });
        },
        loadGraphicData () {
            depot.get({
                url: this.URL.USER.FIND_GRAPHIC_DATA,
                cb: (data) => {
                    if (data.code === 0) {
                        if (!!data.data && !!data.data.context) {
                            var graphicData = JSON.parse(data.data.context);
                            this.version = data.data.version ? data.data.version : 0;
                            this.diagramtData = graphicData;
                            this.diagram.model = go.Model.fromJson(this.diagramtData);
                        }
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                    }
                }
            });
        },
        save () {
            // 保存组织架构图
            localStorage.setItem('diagramData', this.diagram.model.toJson());
            this.$Message.success('保存成功');
        },
        submit () {
            if (this.validateOrg()) {
                let submitData = null;
                if (this.diagram.model && this.diagram.model.toJson()) {
                    submitData = JSON.parse(this.diagram.model.toJson());
                    submitData.version = this.version;
                    submitData.isGuide = true;
                }
                // 提交组织架构图
                depot.post({
                    url: this.URL.USER.ADD_ORGANIZATION_STRUCTURE,
                    data: JSON.stringify(submitData),
                    cb: (data) => {
                        if (data.code === 0) {
                            this.$Message.success('提交成功');
                            // 重新加载图数据
                            this.loadGraphicData();
                            this.findCompanyInfo();
                            this.orgEditorShow = false;
                            // 删除草稿
                            localStorage.removeItem('diagramData');
                        } else {
                            this.$Message.error(data.message);
                        }
                    }
                });
            }
        },
        // 校验组织架构
        validateOrg () {
            var orgDataStr = this.diagram.model.toJson();
            if (!orgDataStr) {
                this.$Message.error('组织架构信息不能为空！');
                return false;
            }
            var orgData = JSON.parse(orgDataStr);
            var nodeList = orgData.nodeDataArray;
            if (!nodeList || nodeList.length < 1) {
                this.$Message.error('组织架构信息不能为空！');
                return false;
            }
            var firstErrorKey = null;
            this.errorMsg = null;
            this.focusField = null;
            nodeList.forEach(node => {
                if (!this.validateNode(this.diagram.findNodeForKey(node.key))) {
                    firstErrorKey = firstErrorKey == null ? node.key : firstErrorKey;
                }
            });

            if (firstErrorKey != null) {
                if (this.errorMsg) {
                    this.$Message.error(this.errorMsg);
                    this.diagram.select(this.diagram.findNodeForKey(firstErrorKey));
                    this.$refs[this.focusField].focus();
                }
                return false;
            }
            return true;
        },
        // This function is used to find a suitable ID when modifying/creating nodes.
        // We used the counter combined with findNodeDataForKey to ensure uniqueness.
        getNextKey () {
            var key = nodeIdCounter;
            while (this.diagram.model.findNodeDataForKey(key) !== null) {
                key = nodeIdCounter++;
            }
            return key;
        },
        // 编辑
        edit (e, obj) {
        },
        // This function provides a common style for most of the TextBlocks.
        // Some of these values may be overridden in a particular TextBlock.
        textStyle () {
            return {font: '9pt  Segoe UI,sans-serif', stroke: '#4c4c4c'};
        },
        // This converter is used by the Picture.
        findHeadShot (key) {
            if (key < 0 || key > 16) return 'http://192.168.0.10/images/HSnopic.png'; // There are only 16 images on the server
            return 'http://192.168.0.10/images/HSnopic.png';
        },
        inspectObject (object) {
            // 自动保存
            localStorage.setItem('diagramData', this.diagram.model.toJson());
            var inspectedObject = null;
            if (object === null) return;
            if (object === undefined) {
                inspectedObject = this.diagram.selection.first();
            } else { // if object was passed in as a parameter
                inspectedObject = object;
            }
            if (inspectedObject === null || this.inspectedObject === inspectedObject) {
                this.inspectedObject = inspectedObject;
                console.log(this.orgEditorShow, 123);
                this.orgEditorShow = false;
                this.selectedOrg = this.blankOrg;
                return;
            }
            this.inspectedObject = inspectedObject;
            if (this.inspectObject === null) return;
            var data = (inspectedObject instanceof go.Part) ? inspectedObject.data : inspectedObject;
            if (!data) return;

            if (inspectedObject instanceof go.Node) {
                console.log(this.orgEditorShow, 456);
                this.orgEditorShow = true;
                // this.selectedOrg = data;
                this.selectedOrg['organization'] = data['organization'];
                this.selectedOrg['position'] = data['position'];
                this.selectedOrg['name'] = data['name'];
                this.selectedOrg['mobile'] = data['mobile'];
                this.selectedOrg['headPicUrl'] = data['headPicUrl'];
                this.$refs['orgForm'].validate((valid) => {
                });
            } else {
                this.selectedOrg = this.blankOrg;
                console.log(this.orgEditorShow, 789);
                this.orgEditorShow = false;
            }
        },
        setNodeValue (key, value) {
            if (!this.selectedOrg) {
                return;
            }
            if (!this.diagramData) {
                return;
            }
            this.inspectedObject = this.diagram.selection.first();
            var isPart = this.inspectedObject instanceof go.Part;
            var data = isPart ? this.inspectedObject.data : this.inspectedObject;
            if (!data) {
                return;
            } // must not try to update data when there's no data!
            this.diagram.model.setDataProperty(data, key, value);
            // 设置组织名称时，校验组织名称与父组织名称是否一致，是一致时，更新nodeType为department
            if (key === 'organization') {
                var parentNode = this.diagram.findNodeForKey(data.parent);
                if (parentNode && parentNode.data) {
                    var parentNodeData = parentNode.data;
                    if (parentNodeData.organization && parentNodeData.organization == value) {
                        this.diagram.model.setDataProperty(data, 'nodeType', 'position');
                    } else {
                        this.diagram.model.setDataProperty(data, 'nodeType', 'department');
                    }
                }
            }
        },
        createRootNode () {
            this.diagram.startTransaction('createDepartmentOrPosition');
            var newemp = {
                key: this.getNextKey(),
                'organization': '',
                'position': '',
                'name': '',
                'mobile': '',
                'nodeType': 'department'
            };
            this.diagram.model.addNodeData(newemp);
            this.diagram.commitTransaction('createDepartmentOrPosition');
        },
        searchPosition (value) {
            this.positionList = [];
            if (this.positionDbList) {
                this.positionDbList.forEach(position => {
                    if (position.name) {
                        if (!!value && position.name.indexOf(value) === 0) {
                            this.positionList.push(position);
                        }
                    }
                });
            }
        },
        changePosition (obj) {
            if (obj) {
                this.searchPosition(obj);
            }
            this.setNodeValue('position', obj);
            if (this.positionList) {
                var flag = true;
                this.positionList.forEach(position => {
                    if (position.name) {
                        if (position.name === obj) {
                            flag = false;
                            this.setNodeValue('positionId', position.id);
                        }
                    }
                });
                if (flag) {
                    this.setNodeValue('positionId', null);
                }
            }
        },
        searchUser (value) {
            this.mobileDisable = false;
            this.userList = [];
            value = value.trim();
            if (this.userDbList) {
                this.userDbList.forEach(user => {
                    if (user.name) {
                        if (!!value && user.name.indexOf(value) === 0) {
                            this.userList.push(user);
                        }
                    }
                });
            }
        },
        changeUser (obj) {
            if (obj) {
                this.searchUser(obj);
            }
            this.setNodeValue('name', obj);
            if (this.userList) {
                var flag = true;
                this.userList.forEach(user => {
                    if (user.name) {
                        if (user.name === obj) {
                            this.setNodeValue('userId', user.id);
                            this.selectedOrg['mobile'] = user['mobile'];
                            if (user['headPicUrl']) {
                                this.selectedOrg['headPicUrl'] = user['headPicUrl'];
                            }
                            this.mobileDisable = true;
                            flag = false;
                        }
                    }
                });
                if (flag) {
                    this.setNodeValue('userId', null);
                    this.selectedOrg['mobile'] = '';
                    this.selectedOrg['headPicUrl'] = 'http://truewin.oss-cn-shanghai.aliyuncs.com/1543977187297_wJ4o6QDcGCCRzUj0je.png';
                    this.mobileDisable = false;
                }
            }
        },
        setNodeColor (node, colors) {
            if (!node) return;
            var shape = node.findObject('SHAPE');
            if (shape) {
                shape.fill = $(go.Brush, 'Linear', {
                    0: colors[0],
                    1: colors[1],
                    start: go.Spot.Left,
                    end: go.Spot.Right
                });
            }
        },
        validateSelectedNode () {
            this.validateNode(this.inspectedObject);
        },
        validateNode (node) {
            var nodeValidateFlag = true;
            if (node) {
                if (this.validateOrganization(node.data.organization, node, null) &&
                    this.validatePosition(node.data.position, node, null) &&
                    this.validateName(node.data.name, node, null) &&
                    this.validateMobile(node.data.mobile, node, null)) {
                    // this.setNodeColor(node, node.colors);
                } else {
                    // this.setNodeColor(node, ["#AC193D", "#BF1E4B"]);
                    nodeValidateFlag = false;
                }
                if (node.isSelected) {
                    this.$refs['orgForm'].validate((valid) => {
                    });
                }
            } else {
                nodeValidateFlag = false;
            }
            return nodeValidateFlag;
        },
        validateOrgData (orgData) {
            if (orgData && orgData.trim() != '') {
                return true;
            } else {
                if (!this.errorMsg) {
                    this.errorMsg = '请输入部门名称';
                    this.focusField = 'orgName';
                }
                return false;
            }
        },
        // 校验表单中的组织
        validateOrganizationInForm (rule, value, callback) {
            this.validateOrganization(value, this.inspectedObject, callback);
        },
        // 校验表单中的手机号
        validateMobileInForm (rule, value, callback) {
            this.validateMobile(value, this.inspectedObject, callback);
        },
        // 校验表单中的职位
        validatePositionInForm (rule, value, callback) {
            this.validatePosition(value, this.inspectedObject, callback);
        },
        // 校验表单中的职位
        validateNameInForm (rule, value, callback) {
            this.validateName(value, this.inspectedObject, callback);
        },
        // 校验组织
        validateOrganization (value, node, callback) {
            if (!node) return false;
            var organization = node.data.organization;
            if (!organization) {
                if (callback) {
                    callback(new Error('部门为必填项'));
                }
                if (!this.errorMsg) {
                    this.errorMsg = '部门为必填项';
                    this.focusField = 'orgName';
                }
                return false;
            }
            if (organization && !this.orgReg.test(organization)) {
                if (callback) {
                    callback(new Error('部门格式不正确'));
                }
                if (!this.errorMsg) {
                    this.errorMsg = '部门格式不正确';
                    this.focusField = 'orgName';
                }
                return false;
            } else {
                if (callback) {
                    callback();
                }
                return true;
            }
        },
        // 校验职位
        validatePosition (value, node, callback) {
            if (!node) {
                return false;
            }
            var position = node.data.position;
            if (position && !this.positionReg.test(position)) {
                if (callback) {
                    callback(new Error('职位格式不正确'));
                }
                if (!this.errorMsg) {
                    this.errorMsg = '职位格式不正确';
                    this.focusField = 'userPosition';
                }
                return false;
            } else {
                if (callback) {
                    callback();
                }
                return true;
            }
        },
        // 校验名称
        validateName (value, node, callback) {
            if (!node) {
                return false;
            }
            var name = node.data.name;
            if (name && !this.nameReg.test(name)) {
                if (callback) {
                    callback(new Error('姓名格式不正确'));
                }
                if (!this.errorMsg) {
                    this.errorMsg = '姓名格式不正确';
                    this.focusField = 'userName';
                }
                return false;
            } else {
                if (callback) {
                    callback();
                }
                return true;
            }
        },
        // 校验手机号
        validateMobile (value, node, callback) {
            if (!node) return false;
            var mobile = node.data.mobile;

            if (mobile && !this.mobileReg.test(mobile)) {
                if (callback) {
                    callback(new Error('手机号格式不正确'));
                }
                if (!this.errorMsg) {
                    this.errorMsg = '手机号格式不正确';
                    this.focusField = 'userMobile';
                }
                return false;
            } else {
                if (callback) {
                    callback();
                }
                return true;
            }
        }
    },
    watch: {
        'selectedOrg.organization' (newValue) {
            this.setNodeValue('organization', newValue);
            // this.validateSelectedNode();
        },
        'selectedOrg.position' (newValue) {
            this.setNodeValue('position', newValue);
        },
        'selectedOrg.name' (newValue) {
            this.setNodeValue('name', newValue);
            // this.validateSelectedNode();
        },
        'selectedOrg.mobile' (newValue) {
            this.setNodeValue('mobile', newValue);
        },
        'selectedOrg.headPicUrl' (newValue) {
            this.setNodeValue('headPicUrl', newValue);
        }
    }
}
</script>

<style lang="less" scoped>
    .guidePage{
        background: rgba(79, 34, 75, 1);
        .backgroundBlackOp1{
            background-color: rgba(0,0,0,0.6);
            color: #fff;
        }
        .guidePage-title-box{
            .guidePage-title-box1{
            width: 100%;
            padding: 8px 0;
            .guideImage{
                width: 119px;
                height: 49px;
                padding: 0 20px;
                border-right: 2px solid #fff;
            }
            .guideTitel{
                font: 14px;
                padding-left: 20px;
            }

            }
        }
        .steps{
            // 步骤条设置
            /deep/.ivu-steps-head{
                background-color: transparent;
            }
            /deep/.ivu-steps-head-inner{
                width: 54px;
                height: 54px;
                border-radius: 100%;
                border: solid 3px rgba(255, 255, 255, 0.5);
            }
            /deep/.ivu-steps-item.ivu-steps-status-process .ivu-steps-head-inner{
                 border: solid 3px rgba(255, 255, 255, 0.5);
            }
            /deep/.ivu-steps-item.ivu-steps-status-finish .ivu-steps-head-inner{
                border: solid 3px #ffffff;
            }
            /deep/.ivu-steps-tail{
                width: 153px;
                padding: 0 10px;
                position: absolute;
                left: 49px;
                top: 20px;
            }
            /deep/.ivu-steps-tail>i{
                width: 260px;
            }
            /deep/.ivu-steps-main{
                display: block;
                // width: 56px;
                // text-align: center;
            }
            /deep/.ivu-steps-title{
                background-color: transparent;
                color: #ffffff;
            }
            /deep/.ivu-steps-icon{
                color: #ffffff !important;
            }
            /deep/.ivu-steps-tail>i{
               background-color: rgba(255, 255, 255, 0.5) !important;
               height: 5px;
            }
            /deep/.ivu-steps-tail>i:after{
               background-color: #ffffff !important;
            }
            // 步骤条设置
            .steps-box{
                padding: 30px 0;
                /deep/.ivu-icon{
                    font-size: 40px;
                    display: inline;
                    height: 131px;
                }
            }
            .steps-form{
                // 要更改 start
                    padding: 80px 50px;
                // 要更改 end
                /deep/.ivu-form-item-label{
                    color: #ffffff;
                }
                // 第一步 start
                .steps-one{
                    /deep/.ivu-upload-drag{
                        width: 70px;
                        height: 70px;
                        background-color: transparent;
                        border: none;
                    }
                     上传图片的位置 start
                    /deep/.ivu-upload{
                        width: 70px;
                        height: 70px;
                    }
                    /deep/.FormItem__label{
                        color: #ffffff;
                        font-size: 14px;
                    }
                    .guideInput{
                        width: 223px;
                    }

                }
                // 第一步 end
                // 第二步 start
                .steps-two{
                }
                // 第二步 end
                // 第三步 start
                .steps-three{
                    text-align: center;
                    .steps-three-img{
                    }
                    .steps-three-contant{
                        padding: 40px 0 80px 0;

                    }
                }
                // 第三步 end

            }
            .saveBtn{

                width: 182px;
            }
            .savePrompt{
                color: #ffffff;
                font-size: 16px;
                margin-top: 33px;
            }
        }
    }
    .flex{
        display: flex;
    }
    .align-items{
        align-items: center;
    }
    .justify-center{
        justify-content: center
    }
    .justify-between{
        justify-content:space-between;
    }
</style>
